<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单发货</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="big">
    <div id="table">
        <el-button @click="openDis">打印订单</el-button>
        <el-button @click="openDis">打印发货单</el-button>

        <el-dialog title="订单信息" :visible.sync="dialogPrintOrder">
            <div style="margin-left: 20px">
                <span>订单编号:{{tProductOrder.orderId}}</span><span style="margin-left: 110px">付款时间:{{tProductOrder.dealTime}}</span><span style="margin-left: 80px">发货时间:{{tProductOrder.newOld}}</span><br>
            </div>
            <div style="margin-top: 20px">
                <span>支付方式:{{tProductOrder.payType}}</span><span style="margin-left: 80px">电话:{{tProductOrder.customerGgy.telephone}}</span><span style="margin-left: 190px">收货地址:{{tProductOrder.customerGgy.address}}</span><br>
            </div>
            <div style="margin-top: 20px">
                <span>收货人:{{tProductOrder.customerGgy.name}}</span><span style="margin-left: 80px">邮编:{{tProductOrder.customerGgy.email}}</span><br>
            </div>
            <table style="margin-top: 50px">
                <tr>
                    <th style="color: #6FB3E0;width: 100px">订单编号</th>
                    <th style="color: #6FB3E0;width: 100px">商品名称</th>
                    <th style="color: #6FB3E0;width: 100px">货号</th>
                    <th style="color: #6FB3E0;width: 100px">属性</th>
                    <th style="color: #6FB3E0;width: 100px">价格</th>
                    <th style="color: #6FB3E0;width: 100px">数量</th>
                    <th style="color: #6FB3E0;width: 100px">小计</th>
                </tr>
                <tr>
                    <td align="center">{{tProductOrder.orderId}}</td>
                    <td align="center">{{tProductOrder.tproductGgy.pname}}</td>
                    <td align="center">{{tProductOrder.tproductGgy.pnumber}}</td>
                    <td align="center">{{tProductOrder.tproductGgy.ttype.productType}}</td>
                    <td align="center">{{tProductOrder.tproductGgy.pprice}}</td>
                    <td align="center">{{tProductOrder.number}}</td>
                    <td align="center">{{tProductOrder.number*tProductOrder.tproductGgy.pprice}}</td>
                </tr>
            </table>
            <div style="margin-left: 470px;margin-top: 20px">
                <span>商品总金额:￥{{tProductOrder.number*tProductOrder.tproductGgy.pprice}}</span>
                <span style="margin-left: 20px">应付款:￥{{tProductOrder.number*tProductOrder.tproductGgy.pprice}}</span>
            </div>
            <div style="margin-left: 450px;margin-top: 20px">
                <span>打印时间:{{tProductOrder.newOld}}</span>
                <span style="margin-left: 20px">操作者:{{user.username}}</span>
            </div>
        </el-dialog>



        <el-dialog title="发货确认" :visible.sync="dialogShip">

            <div>
                <span>订单编号:{{tShipping.orderNumber}}</span>
                <span>发货单号:{{tShipping.shippingNumber}}</span>
            </div>
            <div>
                配送方式:
                <el-select v-model="tShipping.shippingMethodId" placeholder="请选择">
                    <el-option
                            v-for="item in listTLogistics"
                            :key="item.logisticsId"
                            :label="item.logisticsName"
                            :value="item.logisticsId">
                    </el-option>
                </el-select>
                车辆选择:
                <el-select v-model="tShipping.shippingTruckId" @change="selectCar" placeholder="请选择">
                    <el-option
                            v-for="item in listTVehicleCarAndDriver"
                            :key="item.vehicleId"
                            :label="item.vehicleName"
                            :value="item.vehicleId">
                    </el-option>
                </el-select>
            </div>
            <div class="block">
                发货时间:
                <el-date-picker
                        v-model="tShipping.shippingDate"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                </el-date-picker>
                <span>司机姓名:{{tShipping.driverName}}</span>
            </div>
            <div>
                <span>司机电话:{{tShipping.driverTal}}</span>
                <span>车辆牌号:{{tShipping.numberPlate}}</span>
            </div>
            <div>
                <el-button type="primary" @click="submitTShipping">发货</el-button>
                <el-button type="info" @click="dialogShip=false">取消</el-button>
            </div>
        </el-dialog>

        <el-table
                :data="pageTProductOrder.records"
                tooltip-effect="dark"
                ref="tProductOrder"
                style="width: 100%"
                @select="selectCheck"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="编号"
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    label="订单编号"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="订单状态"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px;color: red">{{ scope.row.orderStatus }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="付款情况"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.explain }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="商品名称"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproductGgy==null?"":scope.row.tproductGgy.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品数量"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.number }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="应收金额"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproductGgy==null?"":scope.row.number*scope.row.tproductGgy.pprice }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="实收金额"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproductGgy==null?"":scope.row.number*scope.row.tproductGgy.pprice }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="赠送积分"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproductGgy==null?"":scope.row.number*scope.row.tproductGgy.pprice }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="收货人"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.customerGgy.name }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="收货地址"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.customerGgy.address }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="下单时间"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.dealTime }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="支付时间"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.dealTime }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="订单备注"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.remark }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" style="color: #F2F2F2">
                <template slot-scope="scope">
                    <el-button
                            style="color: #6FB3E0"
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)">发货
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[1, 2, 3, 4, 5]"
                    :page-size="rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTProductOrder.total">
            </el-pagination>
        </div>
    </div>
</div>
    <script>
        new Vue({
            el: '#big',
            data: {
                pageTProductOrder: {records:[

                    ]},
                current: 1,
                rows: 1,

                //订单dia
                dialogPrintOrder:false,
                tProductOrder:{customId:0,name:'',newOld:'',dealTime:'',customerGgy:{telephone:''},tproductGgy:{pname:'',ttype:{productType:''}}},
                user:{},

                //发货
                dialogShip:false,
                //配送方式
                listTLogistics:null,
                //车辆and驾驶员
                listTVehicleCarAndDriver:null,
                tShipping:{id:0,orderNumber:'',shippingNumber:'',shippingMethodId:'',shippingTruckId:'',numberPlate:'',shippingDate:'',driverId:'',driverName:'',driverTal:'',startPlace:'',endPlace:''},
                tpo:null,
            },
            methods: {
                findPageTProductOrder: function () {
                    axios.get('/tProductOrder/' + this.current + "/" + this.rows).then(res => {
                        this.pageTProductOrder = res.data;
                        this.pageTProductOrder.records.forEach(productOrder=>{
                            if (productOrder.orderStatus=='-2'){
                                productOrder.orderStatus="未发货";
                            }
                        })
                    })
                },
                handleSizeChange: function (row) {
                    this.rows=row;
                    this.findPageTProductOrder();
                },
                handleCurrentChange: function (current) {
                    this.current=current;
                    this.findPageTProductOrder();
                },
                openDis(){
                    if(this.tProductOrder.customId==0){
                        this.$message("必须选中一列")
                    }else {
                        this.dialogPrintOrder=true;
                    }
                },
                //确定
                saveComm:function () {
                    console.log()
                },
                selectCheck:function (selectAll,select) {
                    this.$refs.tProductOrder.clearSelection();
                    this.$refs.tProductOrder.toggleRowSelection(select)
                    this.tProductOrder=select;
                    this.tProductOrder['newOld']=this.time(new Date());
                },
                time(date) {
                    let y = date.getFullYear()
                    let m = date.getMonth() + 1
                    m = m < 10 ? '0' + m : m
                    let d = date.getDate()
                    d = d < 10 ? '0' + d : d
                    let h = date.getHours()
                    h = h < 10 ? '0' + h : h
                    let minute = date.getMinutes()
                    minute = minute < 10 ? '0' + minute : minute
                    let second = date.getSeconds()
                    second = second < 10 ? '0' + second : second
                    return y + '-' + m + '-' + d
                },
                getProjectNum () {
                    let projectTime = new Date() // 当前中国标准时间
                    let Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
                    let Month = projectTime.getMonth() + 1 // 获取中国区月份
                    let Day = projectTime.getDate() // 获取几号
                    let hours=projectTime.getHours();//小时
                    let minutes=projectTime.getMinutes()//分钟
                    let seconds=projectTime.getSeconds();//秒

                    let CurrentDate = Year
                    if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
                        CurrentDate += ""+Month
                    } else {
                        CurrentDate += "0" + Month
                    }
                    if (Day >= 10) {
                        CurrentDate += ""+Day
                    } else {
                        CurrentDate += '0' + Day
                    }
                    CurrentDate=CurrentDate+hours+minutes+seconds;
                    return CurrentDate
                },
                findUser:function () {
                    axios.get('/tProductOrder/user').then(res=>{
                        this.user=res.data;
                    })
                },
                findTLogistics:function () {
                    axios.get('/tLogistics/all').then(res=>{
                        this.listTLogistics=res.data;
                    })
                },
                findTVehicleCar:function () {
                    axios.get('/tVehicleCar/all').then(res=>{
                        this.listTVehicleCarAndDriver=res.data;
                    })
                },
                handleEdit:function (index,row) {
                    this.tShipping.orderNumber=row.orderId;
                    this.tShipping.shippingNumber=this.getProjectNum()+Math.floor(Math.random() * 10000);
                    this.tShipping.endPlace=row.customerGgy.address;
                    this.tpo=row;
                    this.dialogShip=true;
                },
                selectCar:function (select) {
                    this.listTVehicleCarAndDriver.forEach(tVehicleCarAndDriver=>{
                        if (tVehicleCarAndDriver.vehicleId==select){
                            this.tShipping.numberPlate=tVehicleCarAndDriver.numberPlate;
                            this.tShipping.driverId=tVehicleCarAndDriver.tvehicleDriverGgy.driverId
                            this.tShipping.driverName=tVehicleCarAndDriver.tvehicleDriverGgy.driverName;
                            this.tShipping.driverTal=tVehicleCarAndDriver.tvehicleDriverGgy.driverControl;
                        }
                    })
                    this.findSCompanyByUserName();
                },
                findSCompanyByUserName:function(){
                    axios.get('/sCompany/byUserName/'+this.user.username).then(res=>{
                        this.tShipping.startPlace=res.data.companyCity+res.data.companyArea+res.data.companyBrand;
                    })
                },
                submitTShipping:function () {
                    axios.post('/tShipping',this.tShipping).then(res=>{
                        if (res.data=='ok'){
                            axios.put('/tProductOrder',this.tpo).then(re=>{
                                if (re.data=='ok'){
                                    this.$message('发货成功')
                                    this.dialogShip=false;
                                    this.findPageTProductOrder();
                                    this.tShipping={id:0,orderNumber:'',shippingNumber:'',shippingMethodId:'',shippingTruckId:'',numberPlate:'',shippingDate:'',driverId:'',driverName:'',driverTal:'',startPlace:'',endPlace:''};
                                }
                            })
                        }
                    })
                }
            },
            mounted() {
                this.findPageTProductOrder();
                this.findUser();
                this.findTLogistics();
                this.findTVehicleCar();
            }
        })
    </script>

</body>
</html>